<template>
  <div class="floating-menu">
    <!-- 主悬浮按钮 -->
    <n-float-button
      position="fixed"
      type="primary"
      :menu-trigger="isMenuOpen ? 'click' : 'hover'"
      :width="56"
      :height="56"
      :right="24"
      :bottom="150"
      :icon-size="28"
      class="main-float-btn"
      @click="toggleMenu"
    >
      <!-- 预留SVG图标位置 - 根据状态显示不同图标 -->
      <div class="custom-icon">
        <!-- 默认图标（菜单关闭时） -->
        <svg v-if="!isMenuOpen" t="1754490214919" class="icon" viewBox="0 0 1031 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="50910" width="64" height="64"><path d="M0 0m41.361077 0l370.996328 0q41.361077 0 41.361077 41.361077l0 370.996328q0 41.361077-41.361077 41.361077l-370.996328 0q-41.361077 0-41.361077-41.361077l0-370.996328q0-41.361077 41.361077-41.361077Z" fill="#21e7db" p-id="50911"></path><path d="M577.801714 0m41.361077 0l370.996328 0q41.361077 0 41.361077 41.361077l0 370.996328q0 41.361077-41.361077 41.361077l-370.996328 0q-41.361077 0-41.361077-41.361077l0-370.996328q0-41.361077 41.361077-41.361077Z" fill="#ea9518" p-id="50912"></path><path d="M0 570.281518m41.361077 0l370.996328 0q41.361077 0 41.361077 41.361077l0 370.996328q0 41.361077-41.361077 41.361077l-370.996328 0q-41.361077 0-41.361077-41.361077l0-370.996328q0-41.361077 41.361077-41.361077Z" fill="#FF3366" p-id="50913"></path><path d="M804.660955 571.534884c125.336597 0 226.859241 101.522644 226.859241 225.605875 0 125.336597-101.522644 226.859241-226.859241 226.859241s-226.859241-101.522644-226.859241-226.859241c0-124.083231 101.522644-225.605875 226.859241-225.605875z m0 70.188494c86.482252 0 156.670747 70.188494 156.670746 155.417381 0 86.482252-70.188494 156.670747-156.670746 156.670747s-155.417381-70.188494-155.417381-156.670747c0-85.228886 68.935129-155.417381 155.417381-155.417381z" fill="#515151" p-id="50914"></path>
        </svg>
        <svg v-else t="1754490749313" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="59702" width="64" height="64"><path d="M895.051852 229.451852H128.948148c-20.859259 0-37.925926-17.066667-37.925926-37.925926s17.066667-37.925926 37.925926-37.925926h768c20.859259 0 37.925926 17.066667 37.925926 37.925926s-17.066667 37.925926-39.822222 37.925926zM895.051852 443.733333H128.948148c-20.859259 0-37.925926-17.066667-37.925926-37.925926s17.066667-37.925926 37.925926-37.925926h768c20.859259 0 37.925926 17.066667 37.925926 37.925926s-17.066667 37.925926-39.822222 37.925926zM512 891.259259c-7.585185 0-17.066667-1.896296-22.755556-7.585185L104.296296 584.059259c-17.066667-13.274074-18.962963-36.02963-7.585185-53.096296 13.274074-17.066667 36.02963-18.962963 53.096296-7.585185l360.296297 280.651852 360.296296-280.651852c17.066667-13.274074 39.822222-9.481481 53.096296 7.585185 13.274074 17.066667 9.481481 39.822222-7.585185 53.096296L534.755556 883.674074c-5.688889 5.688889-15.17037 7.585185-22.755556 7.585185z" fill="#66df6e" opacity=".8" p-id="59703"></path></svg>
      </div>

      <template #menu>
        <!-- 日期筛选按钮 -->
        <n-float-button
          shape="circle"
          type="info"
          :width="52"
          :height="52"
          :icon-size="24"
          @click="handleDateFilterClick"
          class="sub-float-btn"
        >
          <!-- 预留SVG图标位置 -->
          <div class="custom-icon">
           <svg t="1754490101255" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="46142" width="64" height="64"><path d="M351.085714 309.289796c-13.061224 0-23.510204-10.44898-23.510204-23.510204V187.559184c0-13.061224 10.44898-23.510204 23.510204-23.510204s23.510204 10.44898 23.510204 23.510204v98.220408c0 13.061224-10.44898 23.510204-23.510204 23.510204zM672.914286 309.289796c-13.061224 0-23.510204-10.44898-23.510204-23.510204V187.559184c0-13.061224 10.44898-23.510204 23.510204-23.510204s23.510204 10.44898 23.510204 23.510204v98.220408c0 13.061224-10.44898 23.510204-23.510204 23.510204z" fill="#0B9682" p-id="46143"></path><path d="M847.934694 272.718367H176.065306c-33.959184 0-61.126531 27.167347-61.12653 61.126531V799.346939c0 33.959184 27.167347 61.126531 61.12653 61.12653h671.869388c33.959184 0 61.126531-27.167347 61.12653-61.12653V333.844898c0-33.959184-27.167347-61.126531-61.12653-61.126531z" fill="#16C4AF" p-id="46144"></path><path d="M833.828571 815.542857H190.171429c-15.673469 0-28.212245-12.538776-28.212245-28.212245V469.681633h700.081632v318.171428c0 15.15102-12.538776 27.689796-28.212245 27.689796z" fill="#E6FFFB" p-id="46145"></path><path d="M424.75102 604.473469H277.420408c-13.061224 0-23.510204-10.44898-23.510204-23.510204s10.44898-23.510204 23.510204-23.510204h147.330612c13.061224 0 23.510204 10.44898 23.510204 23.510204s-10.44898 23.510204-23.510204 23.510204zM424.75102 727.771429H277.420408c-13.061224 0-23.510204-10.44898-23.510204-23.510205s10.44898-23.510204 23.510204-23.510204h147.330612c13.061224 0 23.510204 10.44898 23.510204 23.510204s-10.44898 23.510204-23.510204 23.510205z" fill="#0B9682" p-id="46146"></path><path d="M746.579592 604.473469h-147.330612c-13.061224 0-23.510204-10.44898-23.510204-23.510204s10.44898-23.510204 23.510204-23.510204H747.102041c13.061224 0 23.510204 10.44898 23.510204 23.510204s-10.971429 23.510204-24.032653 23.510204zM746.579592 727.771429h-147.330612c-13.061224 0-23.510204-10.44898-23.510204-23.510205s10.44898-23.510204 23.510204-23.510204H747.102041c13.061224 0 23.510204 10.44898 23.510204 23.510204s-10.971429 23.510204-24.032653 23.510205z" fill="#0B9682" p-id="46147"></path></svg>
          </div>
          <template #tooltip>
            <span>日期筛选</span>
          </template>
        </n-float-button>

        <!-- 标签筛选按钮 -->
        <n-float-button
          shape="circle"
          type="success"
          :width="52"
          :height="52"
          :icon-size="24"
          @click="handleTagFilterClick"
          class="sub-float-btn"
        >
          <!-- 预留SVG图标位置 -->
          <div class="custom-icon">
            <svg t="1754490169089" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="49907" width="200" height="200"><path d="M788.48 629.419c0-17.067-5.803-31.744-17.75-44.715L421.206 235.861c-12.288-12.288-29.354-22.869-49.834-31.744-21.163-8.874-39.936-12.97-57.003-12.97H110.933c-17.066 0-31.744 6.485-44.032 18.773-12.288 12.288-18.773 26.965-18.773 44.032v202.752c0 17.067 4.096 36.523 12.97 57.003 8.875 21.162 18.774 37.546 31.745 49.834l349.525 349.526c12.288 12.288 26.965 17.749 44.032 17.749 17.067 0 31.744-5.803 44.715-17.75L770.73 673.452c11.264-12.288 17.749-26.966 17.749-44.032zM248.49 392.192c-12.287 12.288-26.965 18.09-44.031 18.09-17.067 0-31.744-5.802-44.032-18.09-12.288-12.288-18.091-26.965-18.091-44.032 0-17.067 5.803-31.744 18.09-44.032 12.289-12.288 26.966-18.09 44.033-18.09 17.066 0 31.744 5.802 44.032 18.09 12.288 12.288 17.749 26.965 17.749 44.032 1.024 17.408-5.461 31.744-17.75 44.032z m709.633 192.17l-349.526-348.5c-12.288-12.289-29.354-22.87-49.834-31.745-21.163-8.874-39.936-12.97-57.003-12.97H391.85c17.067 0 36.523 4.096 57.003 12.97 21.163 8.875 37.547 18.774 49.835 31.744l349.525 348.502c12.288 12.97 18.091 27.648 18.091 44.714s-5.803 31.744-18.09 44.032L619.178 902.827c9.898 9.898 18.773 17.066 25.941 21.845 7.168 4.779 17.067 6.485 28.672 6.485 17.067 0 31.744-5.802 44.715-18.09l239.616-240.299c12.288-12.288 17.749-26.965 17.749-44.032s-5.803-31.061-17.75-44.373z m0 0" fill="#24C891" p-id="49908"></path>
            </svg>
          </div>
          <template #tooltip>
            <span>标签筛选</span>
          </template>
        </n-float-button>

        <!-- 发布说说按钮 -->
        <n-float-button
          shape="circle"
          type="primary"
          :width="52"
          :height="52"
          :icon-size="24"
          @click="handlePublishClick"
          class="sub-float-btn"
        >
          <!-- 预留SVG图标位置 -->
          <div class="custom-icon">
            <svg t="1754489204702" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3454" width="32" height="32"><path d="M1024 0 384 704 0 576 1024 0ZM1024 0 1024 896 483.414063 732.851565 1024 0ZM384 740.488282 364.578125 734.300781 512 1024 606.945313 805.5 476.078125 768 496.279297 960 384 740.488282Z" fill="#7fe986" p-id="3455"></path></svg>
          </div>
          <template #tooltip>
            <span>发布说说</span>
          </template>
        </n-float-button>

        <!-- 清除筛选按钮 -->
        <n-float-button
          v-if="hasActiveFilter"
          shape="circle"
          type="warning"
          :width="52"
          :height="52"
          :icon-size="24"
          @click="handleClearFilterClick"
          class="sub-float-btn"
        >
          <!-- 预留SVG图标位置 -->
          <div class="custom-icon">
            <!-- 在这里填入你的SVG图标 -->
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <!-- 你的SVG内容将在这里 -->
            </svg>
          </div>
          <template #tooltip>
            <span>清除筛选</span>
          </template>
        </n-float-button>
      </template>
    </n-float-button>

    <!-- 回到顶部按钮 -->
    <n-float-button
      v-show="canScrollToTop"
      position="fixed"
      type="primary"
      :width="52"
      :height="52"
      :right="24"
      :bottom="80"
      :icon-size="24"
      @click="scrollToTop"
      class="scroll-top-btn"
    >
      <!-- 预留SVG图标位置 -->
      <div class="custom-icon">
        <svg t="1754491889913" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4197" width="64" height="64"><path d="M652.8 1024a38.4 38.4 0 0 0 38.4-38.4V614.4128L829.5424 614.4a25.6 25.6 0 0 0 16.4352-5.9776l1.664-1.5232a25.6 25.6 0 0 0 1.4976-34.5728l-1.4976-1.6256-304.0896-304.1024a51.2 51.2 0 0 0-70.3744-1.92l-2.048 1.92-304.0768 304.1024a25.6 25.6 0 0 0 16.192 43.6352l1.9072 0.064L332.8 614.4128V985.6a38.4 38.4 0 0 0 38.4 38.4h281.6z" fill="#6B57FE" p-id="4198"></path><path d="M148.9408 0h716.8a25.6 25.6 0 0 1 25.6 25.6v102.4a25.6 25.6 0 0 1-25.6 25.6h-716.8a25.6 25.6 0 0 1-25.6-25.6V25.6a25.6 25.6 0 0 1 25.6-25.6z" fill="#FFBA00" p-id="4199"></path></svg>      </div>
      <template #tooltip>
        <span>回到顶部</span>
      </template>
    </n-float-button>

    <!-- 日期筛选模态框 -->
    <n-modal
      :show="showDateFilter"
      @update:show="showDateFilter = $event"
      preset="card"
      title="日期筛选"
      style="width: 400px"
      :mask-closable="true"
    >
      <n-space vertical>
        <!-- 筛选类型选择 -->
        <n-radio-group :value="filterType" @update:value="filterType = $event" name="filterType">
          <n-space>
            <n-radio value="month">按月份</n-radio>
            <n-radio value="range">按日期范围</n-radio>
          </n-space>
        </n-radio-group>

        <!-- 月份选择 -->
        <div v-if="filterType === 'month'">
          <n-date-picker
            :value="selectedMonth"
            @update:value="selectedMonth = $event"
            type="month"
            placeholder="选择月份"
            format="yyyy-MM"
            value-format="yyyy-MM"
            clearable
          />
        </div>

        <!-- 日期范围选择 -->
        <div v-if="filterType === 'range'">
          <n-date-picker
            :value="selectedRange"
            @update:value="selectedRange = $event"
            type="daterange"
            placeholder="选择日期范围"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            clearable
          />
        </div>

        <!-- 操作按钮 -->
        <n-space justify="end">
          <n-button @click="showDateFilter = false">
            取消
          </n-button>
          <n-button type="primary" @click="applyDateFilter" :disabled="!canApplyDateFilter">
            确定
          </n-button>
        </n-space>
      </n-space>
    </n-modal>

    <!-- 标签筛选模态框 -->
    <n-modal
      :show="showTagFilter"
      @update:show="showTagFilter = $event"
      preset="card"
      title="标签筛选"
      style="width: 400px"
      :mask-closable="true"
    >
      <n-space vertical>
        <!-- 标签选择 -->
        <div>
          <n-text>选择要筛选的标签：</n-text>
          <n-select
            :value="selectedTags"
            @update:value="selectedTags = $event"
            :options="tagOptions"
            multiple
            filterable
            placeholder="搜索并选择标签"
            :loading="tagLoading"
            clearable
            style="margin-top: 8px"
          />
        </div>

        <!-- 筛选模式 -->
        <div>
          <n-text>筛选模式：</n-text>
          <n-radio-group :value="tagFilterMode" @update:value="tagFilterMode = $event" name="tagFilterMode">
            <n-space>
              <n-radio value="any">包含任一标签</n-radio>
              <n-radio value="all">包含所有标签</n-radio>
            </n-space>
          </n-radio-group>
        </div>

        <!-- 操作按钮 -->
        <n-space justify="end">
          <n-button @click="showTagFilter = false">
            取消
          </n-button>
          <n-button type="primary" @click="applyTagFilter" :disabled="!canApplyTagFilter">
            确定
          </n-button>
        </n-space>
      </n-space>
    </n-modal>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'
import { useMessage } from 'naive-ui'
import {
  Add as AddIcon,
  ArrowUp as ArrowUpIcon,
  Calendar as CalendarIcon,
  Close as CloseIcon,
  Pricetag as PricetagIcon,
  Create as CreateIcon
} from '@vicons/ionicons5'
import { tagApi } from '@/api/tag'

// 日期筛选类型定义
interface DateFilter {
  type: 'month' | 'range'
  value: number | [number, number] | null
}

// 标签筛选类型定义
interface TagFilter {
  type: 'tag'
  value: {
    tags: number[]
    mode: 'any' | 'all'
  }
}

// 联合筛选类型
type FilterType = DateFilter | TagFilter

interface Props {
  onFilterChange?: (filter: FilterType) => void
  onClearFilter?: () => void
}

const props = withDefaults(defineProps<Props>(), {
  onFilterChange: () => {},
  onClearFilter: () => {}
})

const message = useMessage()
const router = useRouter()

// 菜单状态
const showDateFilter = ref(false)
const showTagFilter = ref(false)
const isMenuOpen = ref(false)

// 筛选相关
const filterType = ref<'month' | 'range'>('month')
const selectedMonth = ref<number | null>(null)
const selectedRange = ref<[number, number] | null>(null)

// 标签筛选相关
const tagOptions = ref<{ label: string; value: number }[]>([])
const tagLoading = ref(false)
const selectedTags = ref<number[]>([])
const tagFilterMode = ref<'any' | 'all'>('any')

// 滚动相关
const canScrollToTop = ref(false)

// 监听滚动事件
const handleScroll = () => {
  canScrollToTop.value = window.scrollY > 300
}

// 切换菜单状态
const toggleMenu = () => {
  isMenuOpen.value = !isMenuOpen.value
}

// 处理日期筛选点击
const handleDateFilterClick = () => {
  showDateFilter.value = true
  isMenuOpen.value = false
}

// 处理标签筛选点击
const handleTagFilterClick = () => {
  showTagFilter.value = true
  isMenuOpen.value = false
}

// 处理发布点击
const handlePublishClick = () => {
  goToPublish()
  isMenuOpen.value = false
}

// 处理清除筛选点击
const handleClearFilterClick = () => {
  clearFilter()
  isMenuOpen.value = false
}

// 跳转到发布页面
const goToPublish = () => {
  router.push('/talk/publish')
  message.success('跳转到发布页面')
}

// 回到顶部
const scrollToTop = () => {
  window.scrollTo({
    top: 0,
    behavior: 'smooth'
  })
  message.success('已回到顶部')
}

// 计算是否有活跃的筛选条件
const hasActiveFilter = computed(() => {
  return selectedMonth.value !== null || selectedRange.value !== null || selectedTags.value.length > 0
})

// 计算是否可以应用日期筛选
const canApplyDateFilter = computed(() => {
  if (filterType.value === 'month') {
    return selectedMonth.value !== null
  } else {
    return selectedRange.value !== null && selectedRange.value.length === 2
  }
})

// 计算是否可以应用标签筛选
const canApplyTagFilter = computed(() => {
  return selectedTags.value.length > 0
})

// 应用日期筛选
const applyDateFilter = () => {
  console.log('应用日期筛选 - filterType:', filterType.value)
  console.log('应用日期筛选 - selectedMonth:', selectedMonth.value)
  console.log('应用日期筛选 - selectedRange:', selectedRange.value)

  const filter: DateFilter = {
    type: filterType.value,
    value: filterType.value === 'month' ? selectedMonth.value : selectedRange.value
  }

  console.log('发送的日期筛选条件:', filter)
  props.onFilterChange(filter)
  showDateFilter.value = false
  message.success('日期筛选条件已应用')
}

// 应用标签筛选
const applyTagFilter = () => {
  console.log('应用标签筛选 - selectedTags:', selectedTags.value)
  console.log('应用标签筛选 - tagFilterMode:', tagFilterMode.value)

  const filter: TagFilter = {
    type: 'tag',
    value: {
      tags: selectedTags.value,
      mode: tagFilterMode.value
    }
  }

  console.log('发送的标签筛选条件:', filter)
  props.onFilterChange(filter)
  showTagFilter.value = false
  message.success('标签筛选条件已应用')
}

// 清除筛选
const clearFilter = () => {
  selectedMonth.value = null
  selectedRange.value = null
  selectedTags.value = []
  props.onClearFilter()
  message.success('筛选条件已清除')
}

// 加载标签选项
const loadTagOptions = async () => {
  tagLoading.value = true
  try {
    const tags = await tagApi.getTagList(1) // 1代表说说标签
    console.log('获取到的标签列表:', tags)

    tagOptions.value = tags.map(tag => ({
      label: tag.tagName,
      value: tag.id || 0 // 确保ID不为undefined
    }))

    console.log('转换后的标签选项:', tagOptions.value)
  } catch (error) {
    console.error('加载标签失败:', error)
    message.error('加载标签失败')
  } finally {
    tagLoading.value = false
  }
}

// 组件挂载和卸载
onMounted(() => {
  window.addEventListener('scroll', handleScroll)
  loadTagOptions()
})

onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll)
})
</script>

<style scoped>
.floating-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1000;
}

.floating-menu :deep(.n-float-button) {
  pointer-events: auto;
}

.floating-menu :deep(.n-back-top) {
  pointer-events: auto;
}

/* 主悬浮按钮样式 */
.main-float-btn {
  background: transparent !important;
  backdrop-filter: none !important;
  border: none !important;
  box-shadow: none !important;
  transition: all 0.3s ease !important;
}

.main-float-btn:hover {
  background: transparent !important;
  transform: scale(1.05) !important;
  box-shadow: none !important;
}

/* 子按钮样式 */
.sub-float-btn {
  background: rgba(255, 255, 255, 0.9) !important;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(113, 201, 206, 0.2) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;
  transition: all 0.3s ease !important;
  border-radius: 50% !important;
  width: 52px !important;
  height: 52px !important;
}

.sub-float-btn:hover {
  background: rgba(255, 255, 255, 1) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15) !important;
}

/* 回到顶部按钮样式 */
.scroll-top-btn {
  background: rgba(113, 201, 206, 0.8) !important;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(113, 201, 206, 0.3) !important;
  box-shadow: 0 6px 25px rgba(113, 201, 206, 0.25) !important;
  transition: all 0.3s ease !important;
  border-radius: 50% !important;
  width: 52px !important;
  height: 52px !important;
}

.scroll-top-btn:hover {
  background: rgba(113, 201, 206, 1) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 35px rgba(113, 201, 206, 0.35) !important;
}

/* 自定义图标容器 */
.custom-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.custom-icon svg {
  width: 100%;
  height: 100%;
  transition: all 0.3s ease;
}

/* 图标尺寸控制 */
.main-float-btn .custom-icon svg {
  width: 38px !important;
  height: 38px !important;
}

.sub-float-btn .custom-icon svg,
.scroll-top-btn .custom-icon svg {
  width: 24px !important;
  height: 24px !important;
}

/* 按钮悬停时图标效果 */
.main-float-btn:hover .custom-icon svg,
.sub-float-btn:hover .custom-icon svg,
.scroll-top-btn:hover .custom-icon svg {
  transform: scale(1.1);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .main-float-btn {
    width: 52px !important;
    height: 52px !important;
  }

  .sub-float-btn,
  .scroll-top-btn {
    width: 48px !important;
    height: 48px !important;
  }

  .custom-icon svg {
    width: 20px !important;
    height: 20px !important;
  }
}
</style>
